<template>
	<el-select :value="valueTitle" :clearable="clearable" :disabled="selectDisabled" class="filter-item"
		:placeholder="selectPlaceholder" @clear="clearHandle">
		<el-input v-model="filterText" class="selectInput" :placeholder="placeholder" />

		<el-option v-if="showRadio" :value="valueTitle" :label="valueTitle" class="options">
			<el-tree id="tree-option" ref="selectTree" :accordion="accordion" :data="options" :props="props"
				:node-key="props.value" :default-expanded-keys="defaultExpandedKey" :filter-node-method="filterNode"
				@node-click="handleNodeClick">
				<template slot-scope="{ node, data }">
					<div class="custom-tree-node">
						<span v-if="!data.disabled"
							style="width: 15px;height: 15px;border-radius: 50%;display: inline-block;position: relative;vertical-align: middle;margin-right: 8px;"
							:style="radioId == data.id ? 'border: 1px solid #1890ff;background: #1890ff;' : 'border: 1px solid #DCDFE6;'">
							<span v-if="radioId == data.id"
								style="position: absolute;top: 0;left:0;bottom: 0;right:0;margin: auto;width: 5px;height: 5px;display: inline-block;background: #fff;border-radius: 50%;" />
						</span>
						<span style="display: inline-block;vertical-align: middle;">{{ node.label }}</span>
					</div>
				</template>
			</el-tree>
		</el-option>

		<el-option v-else :value="valueTitle" :label="valueTitle" class="options">
			<el-tree id="tree-option" ref="selectTree" :accordion="accordion" :data="options" :props="props"
				:node-key="props.value" :default-expanded-keys="defaultExpandedKey" :filter-node-method="filterNode"
				@node-click="handleNodeClick" />
		</el-option>
	</el-select>
</template>

<script>
	export default {
		name: 'ElTreeSelect',
		props: {
			/* 配置项 */
			props: {
				type: Object,
				default: () => {
					return {
						value: 'id', // ID字段名
						label: 'title', // 显示名称
						children: 'children' // 子级字段名
					}
				}
			},
			/* 选项列表数据(树形结构的对象数组) */
			options: {
				type: Array,
				default: () => {
					return []
				}
			},
			/* 初始值 */
			value: {
				type: [Number, String],
				default: () => {
					return null
				}
			},
			/* 可清空选项 */
			clearable: {
				type: Boolean,
				default: () => {
					return true
				}
			},
			/* 自动收起 */
			accordion: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			selectPlaceholder: {
				type: String,
				default: () => {
					return '请选择'
				}
			},
			placeholder: {
				type: String,
				default: () => {
					return '检索关键字'
				}
			},
			selectDisabled: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			showRadio: {
				type: Boolean,
				default: () => {
					return false
				}
			}
		},
		data() {
			return {
				filterText: '',
				valueId: this.value, // 初始值
				valueTitle: '',
				defaultExpandedKey: [],
				radioId: undefined
			}
		},
		watch: {
			value() {
				this.valueId = this.value
				this.initHandle()
			},
			filterText(val) {
				this.$refs.selectTree.filter(val)
			}
		},
		mounted() {
			this.initHandle()
		},
		methods: {
			// 初始化值
			initHandle() {
				if (this.valueId) {
					this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label] // 初始化显示
					this.$refs.selectTree.setCurrentKey(this.valueId) // 设置默认选中
					this.defaultExpandedKey = [this.valueId] // 设置默认展开
					this.radioId = this.valueId
				}
				this.initScroll()
			},
			// 初始化滚动条
			initScroll() {
				this.$nextTick(() => {
					const scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
					const scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
					scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
					scrollBar.forEach(ele => ele.style.width = 0)
				})
			},
			// 切换选项
			handleNodeClick(node) {
				if (node.disabled) {
					return false
				}
				if (this.showRadio) {
					this.radioId = node.id
				}
				this.valueTitle = node[this.props.label]
				this.valueId = node[this.props.value]
				this.$emit('getValue', {
					id: this.valueId,
					name: this.valueTitle
				})
				this.defaultExpandedKey = []
			},
			// 清除选中
			clearHandle() {
				this.valueTitle = ''
				this.valueId = null
				this.defaultExpandedKey = []
				this.radioId = undefined;
				this.clearSelected()
				this.$emit('getValue', {
					id: null,
					name: null
				})
			},
			/* 清空选中样式 */
			clearSelected() {
				const allNode = document.querySelectorAll('#tree-option .el-tree-node')
				allNode.forEach((element) => element.classList.remove('is-current'))
			},
			filterNode(value, data) {
				if (!value) return true
				return data.name.indexOf(value) !== -1
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
		height: auto;
		max-height: 210px;
		padding: 0;
		overflow: hidden;
		overflow-y: auto;
	}

	.el-select-dropdown__item.selected {
		font-weight: normal;
	}

	ul li>>>.el-tree .el-tree-node__content {
		height: auto;
		padding: 0 20px;
	}

	.el-tree-node__label {
		font-weight: normal;
	}

	.el-tree>>>.is-current .el-tree-node__label {
		color: #409EFF;
		font-weight: 700;
	}

	.el-tree>>>.is-current .el-tree-node__children .el-tree-node__label {
		color: #606266;
		font-weight: normal;
	}

	.selectInput {
		padding: 0 5px;
		box-sizing: border-box;
	}

	/* 开发禁用 */
	/* .el-tree-node:focus>.el-tree-node__content{
    background-color:transparent;
    background-color: #f5f7fa;
    color: #c0c4cc;
    cursor: not-allowed;
  }
  .el-tree-node__content:hover{
    background-color: #f5f7fa;
  } */
</style>

<style type="text/css">
	.custom-tree-node span {
		color: #606266 !important;
	}
</style>
